var db;

// connect to database
function connectDB() {
	db = window.openDatabase("JapaneseBasic", "1.0", "Japanese Database",500000);
	db.transaction(getKanjiList, errorCB);
}

// function will be called when an error occurred
function errorCB(err) {
	alert("Error processing SQL: " + err.code);
}

function successCB() {
	db.transaction(getKanjiList, errorCB);
	//console.log("Database has been created successfully");
}

function getKanjiList(tx) {
	var sql = "SELECT k_id, k_kanji ,k_mean_kanji, k_mean_en ,k_mean_vi "
			+ " From kanji ORDER BY k_id ASC ";
	tx.executeSql(sql, [], showKanji);
}

/**
 * 
 * @param tx
 * @param results
 */
function showKanji(tx, results) {
	showListView(tx, results);
	showGridView(tx, results);
	db = null;
}


function showListView(tx,results){
	var len = results.rows.length;
	for (var i = 0; i < len; i++) {
		var data = results.rows.item(i);
		console.log('data.k_kanji ' + i + ' la == ' + data.k_kanji);
		$('#kanjiListView')
				.append(
						'<li class="ui-first-child"><a  href="kanji_detail.html?id='+ data.k_id+ '" data-ajax="false" data-direction="reverse" class="ui-btn ui-btn-icon-right ui-icon-carat-r"> ' 
					   +'<span id="wrap">'
					   +'<span class="kanji" style="font-weight:bold;font-size: 18px;margin-left:-40px;">'+ data.k_kanji+ '</span>'
					   +'<span class="mean_kanji" style="text-transform:uppercase;font-weight:bold;font-size: 16px;">'+ data.k_mean_kanji+ '</span>'
					   +'<span class="mean_vi">'+ data.k_mean_vi+ '</span> '
					   //+'<span class="mean_en">'+ data.k_mean_en+ '</span>'
						+'</span></a></li>');
	}
}

function showGridView(tx,results){
	var len = results.rows.length; // so chu kanji
	var x = 5 // so chu kanji tren 1 row //so rows = len : x
	for (var i = 0; i < len; i++) {
		var data = results.rows.item(i);
		switch (i%5) {
		case 0:
			$('#kanjiGridView').append('<div class="ui-block-a"><a class="ui-shadow ui-btn ui-corner-all" href="kanji_detail.html?id='+ data.k_id+ '" data-ajax="false" data-direction="reverse">'
					+ '<div><big><span style="font-size: 62px;"><strong>'+data.k_kanji+'</strong></span></big></div>'
					+ '<div><span style="font-size: 18px;">'+data.k_mean_kanji+'</span></div>'
					+ '</a></div>');
			break;
		case 1:
			$('#kanjiGridView').append('<div class="ui-block-b"><a class="ui-shadow ui-btn ui-corner-all" href="kanji_detail.html?id='+ data.k_id+ '" data-ajax="false" data-direction="reverse">'
					+ '<div><big><span style="font-size: 62px;"><strong>'+data.k_kanji+'</strong></span></big></div>'
					+ '<div><span style="font-size: 18px;">'+data.k_mean_kanji+'</span></div>'
					+ '</a></div>');
			break;
		case 2:
			$('#kanjiGridView').append('<div class="ui-block-c"><a class="ui-shadow ui-btn ui-corner-all" href="kanji_detail.html?id='+ data.k_id+ '" data-ajax="false" data-direction="reverse">'
					+ '<div><big><span style="font-size: 62px;"><strong>'+data.k_kanji+'</strong></span></big></div>'
					+ '<div><span style="font-size: 18px;">'+data.k_mean_kanji+'</span></div>'
					+ '</a></div>');
			break;
		case 3:
			$('#kanjiGridView').append('<div class="ui-block-d"><a class="ui-shadow ui-btn ui-corner-all" href="kanji_detail.html?id='+ data.k_id+ '" data-ajax="false" data-direction="reverse">'
					+ '<div><big><span style="font-size: 62px;"><strong>'+data.k_kanji+'</strong></span></big></div>'
					+ '<div><span style="font-size: 18px;">'+data.k_mean_kanji+'</span></div>'
					+ '</a></div>');
			break;
		case 4:
			$('#kanjiGridView').append('<div class="ui-block-e"><a class="ui-shadow ui-btn ui-corner-all" href="kanji_detail.html?id='+ data.k_id+ '" data-ajax="false" data-direction="reverse">'
					+ '<div><big><span style="font-size: 62px;"><strong>'+data.k_kanji+'</strong></span></big></div>'
					+ '<div><span style="font-size: 18px;">'+data.k_mean_kanji+'</span></div>'
					+ '</a></div>');
			break;
		}
	}
}